<template>
    <div class="tongxin-sidebar">
        <ul>
            <li><router-link to="/tongxin/tongxin1">1.父子组件-props</router-link></li>
            <li><router-link to="/tongxin/tongxin2">2.父子组件-emit</router-link></li>
            <li><router-link to="/tongxin/tongxin3">3.父子组件-mitt</router-link></li>
            <li><router-link to="/tongxin/tongxin4">4.父子组件-v-model</router-link></li>
            <li><router-link to="/tongxin/tongxin5">5.祖孙组件-$attrs</router-link></li>
            <li><router-link to="/tongxin/tongxin6">6.父子$refs-$parent</router-link></li>
            <li><router-link to="/tongxin/tongxin7">7.祖孙provide/inject</router-link></li>
            <li>8.pinia传值</li>
            <li><router-link to="/tongxin/tongxin9">9.slot</router-link></li>
        </ul>
    </div>
    <div class="tongxin-content">
        <RouterView></RouterView>
    </div>
</template>
<script setup lang="ts">


</script>
<style lang="scss" scoped>
.tongxin-sidebar {
    width: 200px;
    float: left;
    border: 1px solid #ccc;
    height: 100vh;
    ul li{
        list-style: none;
    }
}

.tongxin-content {
    margin-left: 220px;
    border: 1px solid #ccc;
    height: 100vh;
}
</style>
